<template>
    <view style="margin-bottom:200rpx">
        <radio-group @change="radioChange">
            <block v-for="(item, index) in addressList" :key="index">
                <view class="address-box">
                    <view @tap.stop="choosedAddress(item)">
                        <view class="name-phone">
                            <text>{{item.contacts}}</text>
                            <text style="margin-left:20rpx">{{item.phone}}</text>
                        </view>
                        <view class="address">{{item.province + item.city + item.area + item.full_address}}</view>
                    </view>
                    <view class="handle">
                        <view class="handle-default">
                            <radio :value="item.id" style="transform:scale(0.8)" :checked="item.is_default == 1" @catchtap="_catchtap"/>
                            <view style="line-height:48rpx">设为默认</view>
                        </view>
                        <view class="handle-edit-delete">
                            <view class="address-edit" @tap.stop="goEditAddress(item)">
                                <view class="edit-img">
                                    <img :src="img_base_url + '/bianji.png'" alt="" style="width:100%;height:100%">
                                </view>
                                <view class="handle-text">编辑</view>
                            </view>
                            <view class="address-del" @tap.stop="delAddress(item.id)">
                                <view class="del-img">
                                    <img :src="img_base_url + '/shanchu.png'" alt="" style="width:100%;height:100%">
                                </view>
                                <view class="handle-text">删除</view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </radio-group>
        <view class="bottom">
            <view class="bottom-button" @tap="goAddAddress">添加新地址</view>
        </view>
        <noAddress :showAddress="showAddress"></noAddress>
    </view>
</template>

<script>
import noAddress from '../../components/no-address/no-address'
import { config } from '../../common/utils/congfig'
import { UserModel } from '../../model/user'
const userModel = new UserModel()
export default {
    components: {
        noAddress
    },
    data() {
        return {
            img_base_url: config.img_base_url,
            addressList: [],
            chooseAddress: false,
            showAddress: false
        }
    },
    methods: {
        _getUserAddress() {
            userModel.getUserAddress().then((res) => {
                if(res.code == 200) {
                    this.addressList = res.data
                    if(this.addressList == 0) {
                        this.showAddress = true
                    }else {
                        this.showAddress = false
                    }
                }
            })
        },
        _catchtap() {

        },
        radioChange(e) {
            console.log(e)
            e.stopPropagation()
            let id = e.detail.value
            let data = {
                id: id
            }
            userModel.setDefaultAddress(data).then((res) => {
                if(res.code == 200) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        },
        goEditAddress(item) {
            console.log(item)
            uni.navigateTo({
                url: '/pagesD/add-address/add-address?addressInfo=' + JSON.stringify(item),
                // success: (item) => {
                //     console.log(item)
                // }
            })
        },
        goAddAddress() {
            uni.navigateTo({
                url: '/pagesD/add-address/add-address'
            })
        },
        delAddress(id) {
            userModel.deleteAddress(id).then((res) => {
                if(res.code == 204) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'success'
                    })
                    this._getUserAddress()
                }
            })
        },
        choosedAddress(item) {
            let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
            let prevPage = pages[ pages.length - 2 ];
            if(this.chooseAddress) {
                prevPage.setData({
                    addressId: item.id,
                    flag: false
                })
                uni.navigateBack()
            }
        }
    },
    onLoad(option) {
        if(JSON.stringify(option) != '{}') {
            this.chooseAddress = option.chooseAddress
        }
    },
    onShow() {
        this._getUserAddress()
    }
}
</script>

<style>
    .address-box {
        width: 623rpx;
        background: #ffffff;
        border-radius: 10rpx;
        margin: 20rpx auto 0;
        padding: 20rpx 45rpx 46rpx 30rpx;
    }
    .name-phone {
        color: #333333;
        font-size: 30rpx;
    }
    .address {
        margin-top: 20rpx;
        color: #333333;
        font-size: 28rpx;
    }
    .handle {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
    }
    .handle-default {
        display: flex;
        justify-content: left;
        color: #333333;
        font-size: 24rpx;
    }
    radio .wx-radio-input{
        border: 1rpx solid #24C79C;
    }
    radio .wx-radio-input.wx-radio-input-checked{
        background: #ffffff;
    }
    radio .wx-radio-input.wx-radio-input-checked::before{
        border-radius: 50%;/* 圆角 */
        color:#24C79C; /* 对勾颜色 白色 */
        /* border: 1rpx solid #24C79C; */
        background: #ffffff;
        transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
    }
    .handle-edit-delete {
        display: flex;
        justify-content: left;
        color: #333333;
        font-size: 26rpx;
        line-height: 48rpx;
    }
    .address-edit,
    .address-del {
        display: flex;
        justify-content: left;
    }
    .address-del {
        margin-left: 30rpx;
    }
    .edit-img {
        width: 29rpx;
        height: 30rpx;
        margin-top: 6rpx;
    }
    .del-img {
        width: 34rpx;
        height: 34rpx;
        margin-top: 6rpx;
    }
    .handle-text {
        margin-left: 21rpx;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 140rpx;
        background: #ffffff;
    }
    .bottom-button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx; 
        color: #FFFFFF;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
        margin: 28rpx auto 0;
    }
</style>